:root {
  --linethick: 4px;
  --linecolor: #696666;
  --linewidth:0.8vw;
}

.processTable{
	width: 98%;
	margin: 12vh auto;
	height: 50rem;
}
.processTable a{
	color:#fff !important;
}
.processTable tr td{
	text-align: center;
	height: 5.55rem;
}
.processTable tr td.transDown{
	transform: translateY(20px);
}
.processTable tr td>.processBox{
	background-color:#c0c0c0;
	text-align: center;
	padding: 1rem 0.8vw;
	display: inline-block;
	color: #fff;
	border-radius: 8px;
	font-size: 13px;
	margin:0.2rem auto;
}

/*高度填充*/
.processTable tr td.empty{
	height: 2.5rem;
}
/* .singleTd{
	margin: 0 0 !important;
} */
.mainBox{
	width: 9vw;
}
/*线条*/
.processTable .line-throw{
	background-image: linear-gradient(var(--linecolor), var(--linecolor));
	background-size: 100% var(--linethick);
	background-repeat: no-repeat;
	background-position: 0 50%;
}
.processTable .line-throw.extra{
	width: 1vw;
}

.processTable .line-corner-down{
	width: var(--linethick);
	background-image: linear-gradient(var(--linecolor), var(--linecolor));
	background-size:var(--linethick) calc(50% + var(--linethick)/2);
	background-repeat: no-repeat;
	background-position:0 100%;
}
.processTable .line-corner-up{
	width: var(--linethick);
	background-image: linear-gradient(var(--linecolor), var(--linecolor));
	background-size:var(--linethick) calc(50% + var(--linethick)/2);
	background-repeat: no-repeat;
	background-position:0 0;
}
.processTable .line-align{
	width: var(--linethick);
	background-image: linear-gradient(var(--linecolor), var(--linecolor));
	background-size:var(--linethick) 100%;
	background-repeat: no-repeat;
	background-position:0 0;
}

.processTable .corner-left,
.processTable .corner-right{
	background-image: linear-gradient(var(--linecolor), var(--linecolor));
	background-size:var(--linethick) calc(50% + var(--linethick)/2);
	background-repeat: no-repeat;
	background-position:50% 100%;
}
.processTable .corner-left::before{
	content: "";
	display: block;
	width: 50%;margin-left: 50%;
	height: var(--linethick);
	background-color: var(--linecolor);
}
.processTable .corner-right::before{
	content: "";
	display: block;
	width: 50%;margin-left: 0%;
	height: var(--linethick);
	background-color: var(--linecolor);
}


.processTable .line-right,
.processTable .line-left{
	background-image: linear-gradient(var(--linecolor), var(--linecolor));
	background-size:var(--linethick) calc(50% + var(--linethick)/2);
	background-repeat: no-repeat;
	background-position:50% 0;
	width: 5vw;
}

/*宽度控制*/
.w5{
	width: 6.5vw !important;
}
.w10{
	width: 90% !important;
	margin: 0;
}
.confirm{
	
}
/*间距控制*/
.p5{
	padding:5px 0;
}
.p10{
	padding:10px 0;
}
.p15{
	padding:15px 0;
}
.p20{
	padding:20px 0;
}
.m20{
	margin: 20px 0;
}
/*字体控制*/
.strong{
	font-weight: 600 !important;
	font-size: 14px !important;
}

/*颜色控制*/
.c-green{
	background-color:#9cba5b !important;
}
.c-red{
	background-color:#f9697e !important;
}


/*flexList独立排版*/
.rowList{
	width:6.5vw;height: 14.6rem;
}
.flex{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content: center;
	position: absolute;
}
.flexlist{
	margin: -13.7rem 0;
	margin-left: 0.9vw;
}

.flexlist .processBox{
	border-radius: 8px;
	text-align: center;
	color: #fff;
	font-size: 14px;
	background-color: #c0c0c0;
	padding: 1rem 0.5vw;
	position: relative;
	z-index: 2;
	margin: 0.7rem 0;
	width: 5vw;
}

.flexlist .processBox::before{
	content: "";
	display: block;
	width: var(--linewidth);
	height: var(--linethick);
	background-color: #696666;
	margin-left: calc(0px - var(--linewidth) - 0.5vw);
	z-index: 1;
	position: absolute;
	top:50%;
}

.flexlist .processBox::after{
	content: "";
	display: block;
	width: var(--linewidth);
	height: var(--linethick);
	background-color: var(--linecolor);
	margin-left: calc(100% - 0.6vw);
	z-index: 1;
	position: absolute;
	top:50%;
}
.flexlist .line-vertical-1,.flexlist .line-vertical-2{
	width: var(--linethick);
	background-color: var(--linecolor);
	display: block;
	height:21.8rem;
	margin-left: calc(-7vw - var(--linewidth) - var(--linethick)) ;
	position: absolute;
	transform: translateY(calc(var(--linethick)/2));
}
.flexlist .line-vertical-2{
	margin-left: calc(6.7vw + var(--linewidth) + var(--linethick)) ;
}


@media screen and (max-width: 1300px){
	.processTable tr td>.processBox,.flexlist .processBox{
		min-width: 75px;
	}
	
	.processTable{
		min-width: 1200px;
	}
	
	.rowList{
		min-width: 80px;
	}
	.flex{
		margin-left: 15px !important;
	}
	.flexlist .line-vertical-1{
		margin-left: -92px !important;
	}
	
	.flexlist .line-vertical-2{
		margin-left: 92px !important;
	}
	
	.flexlist .processBox::before{
		width: 11px !important;
		margin-left: -12px !important;
	}
	
	.flexlist .processBox::after{
		width: 11px !important;
	}
}

